---
layout: default
---

{% assign assets_base_url = site.url %}
{% if site.cdn.jsdelivr.enabled %}
{% assign assets_base_url = "https://cdn.jsdelivr.net/gh/" | append: site.repository | append: '@master' %}
{% endif %}
<section class="collection-head small" data-pattern-id="{{ page.title | truncate: 15, ''}}">
  <div class="container">
    <div class="columns">
      <div class="column three-fourths">
        <div class="collection-title">
          <h1 class="collection-header">{{ page.title }}</h1>
          <div class="collection-info">
            {% if page.date %}
            <span class="meta-info inline-flex align-items-center">
              <span class="octicon octicon-calendar"></span> {{ page.date | date: "%Y/%m/%d" }}
            </span>
            {% endif %}
            {% for cat in page.categories %}
            <span class="meta-info inline-flex align-items-center">
              <span class="octicon octicon-file-directory"></span>
              <a href="{{ site.url }}/categories/#{{ cat }}" title="{{ cat }}">{{ cat }}</a>
            </span>
            {% endfor %}
            {% if site.components.word_count.enabled %}
            <span class="meta-info inline-flex align-items-center">
              <span class="octicon octicon-clock"></span>
              共 {{ page.content | strip_html | strip_newlines | remove: " " | size }} 字，约 {{ page.content | strip_html | strip_newlines | remove: " " | size | divided_by: 350 | plus: 1 }} 分钟
            </span>
            {% endif %}
          </div>
        </div>
      </div>
      <div class="column one-fourth mobile-hidden">
        <div class="collection-title">
          {% include sidebar-qrcode.html %}
        </div>
      </div>
    </div>
  </div>
</section>
<!-- / .banner -->
<section class="container content">
  <div class="columns">
    <div class="column three-fourths" >
      {% include content-header-ad.html %}
      <article class="article-content markdown-body">
        {{ content }}
      </article>
      <div class="post-tail-wrapper">
        <div class="post-meta mb-3">
          <span class="octicon octicon-file-directory mr-1"></span>
          {% for cat in page.categories %}
          <a href="{{ site.url }}/categories/#{{ cat }}" title="{{ cat }}">{{ cat }}</a>
          {% endfor %}
        </div>
        <div class="share flex align-items-center justify-content-between">
          <div class="license-wrapper"> This post is licensed under <a href="https://creativecommons.org/licenses/by/4.0/"> CC BY 4.0 </a> by the author.</div>
          {% include sns-share.html %}
        </div>
      </div>
      {% include content-footer-ad.html %}
      <div class="comment">
        {% include comments.html %}
      </div>
    </div>
    <div class="column one-fourth sticky-nav">
      {% include sidebar-post-nav.html %}
      {% include sidebar-detail-ad.html %}
    </div>
    {% include clipboard.html %}
    {% include image-handle.html %}
  </div>
</section>
<!-- /section.content -->
